<template>
  <div>
    <span>用户名字</span>
    <input v-model="username" type="text" />
    <br />
    <span>用户密码</span>
    <input v-model="password" type="text" />
    <br />
    <span>来自于</span>
    <select v-model="select">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广东">广东</option>
    </select>
    <br />
    <span>爱好</span>
    <input v-model="hobby" type="checkbox" value="抽烟" />抽烟
    <input v-model="hobby" type="checkbox" value="喝酒" />喝酒
    <input v-model="hobby" type="checkbox" value="写代码" />写代码
    <br />

    <span>性别</span>
    <input v-model="gender" type="radio" name="sex" checked value="男" />男
    <input v-model="gender" type="radio" name="sex" checked value="女" />女
    <br />
    <span>自我介绍</span>
    <textarea v-model="textbox"></textarea>
  </div>
</template>

<script>

export default {

  data () {
    return {
      username: "",
      password: '',
      select: '',
      // v-model遇到复选框
      // v-model的vue变量是非数组类型，关联的复选框的 checked属性（选中状态 true/false）
      // 是数组类型，关联的复选框的value属性（选中,value值装入数组里，没选中，会自动从数组里移除
      hobby: [],
      gender: '',
      textbox: ''

    }
  }
}
</script>

<style>
</style>
